import React from 'react'
import { Layout, theme } from 'antd'
import Sider from './../components/commonAside'
import Header from './../components/commonHeader'
import CommonTag from './../components/commonTag'
import './main.css'
import { useSelector } from 'react-redux'
import { Outlet } from 'react-router-dom'

const { Content } = Layout
const Main = () => {
  const {
    token: { colorBgContainer, borderRadiusLG }
  } = theme.useToken()

  // 获取展开收起状态
  const collapse = useSelector((state) => state.tab.isCollapse)

  return (
    <Layout>
      <Sider collapse={collapse} />
      <Layout>
        <Header collapse={collapse} />
        <CommonTag />
        <Content
          style={{
            margin: '14px 16px',
            padding: 24,
            minHeight: 280,
            background: colorBgContainer,
            borderRadius: borderRadiusLG
          }}>
          <Outlet />
        </Content>
      </Layout>
    </Layout>
  )
}

export default Main
